<template>
  <div>
    <el-container>
      <el-header>
        <div
          style="
            width: 100%;
            border-bottom: 1px solid black;
            margin-top: -20px;
            line-height: 70px;
          "
        >
          <span style="font-size: 18px; font-weight: bold">类型</span>
          <el-button style="float: right; line-height: 40px; width: 110px"
            >添加类型</el-button
          >
        </div>
      </el-header>
      <el-main>
        <el-table
          :data="newMenus"
          border
          style="width: 100%"
          row-key="type"
          :lazy="true"
          :tree-props="{ children: 'child' }"
        >
          <el-table-column prop="type" label="书本类型" width="200">
          </el-table-column>
          <!--  -->

          <!--  -->
          <el-table-column prop="id" label="类型ID" width="200">
          </el-table-column>
          <el-table-column prop="prio" label="优先级" width="200">
          </el-table-column>
          <el-table-column prop="pid" label="添加子节点" width="200">
            <template #default="scope">
              <el-button
                type="primary"
                v-if="scope.row.pid == 0"
                @click="tj(scope.row.id, scope.row.type, scope.row.pid)"
                >+</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="pid" label="修改" width="200">
            <!-- <el-button type="warning" @click="tjs(pid)">🖊</el-button> -->
            <template #default="scope">
              <el-button type="warning" @click="tjs(scope.row, scope.row.pid)"
                >🖊</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogTableVisible">
      <span style="position: absolute; top: 6%; left: 2%; font-size: 18px"
        >类型信息</span
      >
      <div>
        <el-form>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">PID</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                readonly
                v-model.lazy="lxxx.pid"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">父类型</label>
            <div style="width: 92%">
              <el-input
                type="next"
                autocomplete="off"
                readonly
                v-model.lazy="lxxx.flx"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">本ID</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                readonly
                v-model.lazy="lxxx.bid"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">本类型</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                v-model.lazy="lxxx.blx"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">优先级</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                v-model.lazy="lxxx.yxj"
              ></el-input>
            </div>
          </div>
          <el-button @click="postData1()" style="margin-top: 20px"
            >添加子节点</el-button
          >
        </el-form>
      </div>
    </el-dialog>
    <!--  -->
    <el-dialog v-model="dialogTableVisibles">
      <span style="position: absolute; top: 6%; left: 2%; font-size: 18px"
        >类型信息</span
      >
      <div>
        <el-form>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">PID</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                readonly
                v-model.lazy="xg.pid"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">父类型</label>
            <div style="width: 92%">
              <el-input
                type="next"
                autocomplete="off"
                readonly
                v-model.lazy="xgfl"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">本ID</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                readonly
                v-model.lazy="xg.id"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">本类型</label>
            <div style="width: 92%">
              <el-input
                type="next"
                autocomplete="off"
                v-model.lazy="xgs.type"
              ></el-input>
            </div>
          </div>
          <div style="display: flex; line-height: 50px; margin-top: 5px">
            <label style="width: 10%">优先级</label>
            <div style="width: 92%">
              <el-input
                type="number"
                autocomplete="off"
                v-model.lazy="xgs.prio"
              ></el-input>
            </div>
          </div>
          <el-button @click="postData2()" style="margin-top: 20px"
            >修改</el-button
          >
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Type2",
  data() {
    return {
      list1: [],
      newMenus: [],
      cs: 0,
      dialogTableVisible: false,
      dialogTableVisibles: false,
      lxxx: {
        pid: "",
        flx: "",
        bid: "",
        blx: "",
        yxj: "",
      },
      xg: {
        // id:'',
        // isdel:'',
        // pid:'',
        // prio:'',
        // type:'',
      },
      xgs: {
        prio: "",
        type: "",
      },
      xgfl: "",
    };
  },
  // 组件创建之后
  // http://127.0.0.1:8093/api/adm/type/findAll2
  created() {
    // 发起get请求,获取数据
    this.axios
      .get("/api/adm/type/findAll2")
      .then((res) => {
        // 判断状态
        console.log(res);
        if (res.status === 200) {
          // 向表格渲染数据
          this.list1 = res.data.data;
          console.log(this.list1);
          //
          this.getMenu(0, this.newMenus);
          console.log(this.newMenus);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    // 递归函数
    getMenu(id, arr) {
      // 判断
      if (id === 0) {
        // 第一级菜单
        this.list1.forEach((item) => {
          if (item.pid === 0) {
            arr.push(item);
          }
        });
        // 在第一级菜单完成之后，从第一级的第一个菜单开始，进入第二季菜单的筛选
        this.getMenu(this.newMenus[0].id, this.newMenus);
      } else {
        // 其他等级的菜单
        // 1.循环等级数组：给每个第一级找到第二级
        arr.forEach((item) => {
          // 2.将list整个循环，将每个第一级找到第二级
          this.list1.forEach((val) => {
            // 判断父级的id === 数据的pid【符合：数据是父级的子级菜单】
            if (item.id === val.pid) {
              // 声明一个下一维度的数组
              if (!item.child) item.child = [];
              // 将符合条件的数据，添加到child下
              item.child.push(val);
            }
          });
          // 每一个等级的36次循环结束之后，重新调用函数，进入下一个等级的操作
          if (item.child) {
            // 终止程序
            this.getMenu(1, item.child);
          }
        });
      }
    },
    tj(x, y, z) {
      this.lxxx.pid = x;
      this.lxxx.flx = y;
      this.lxxx.bid = z;
      console.log(this.lxxx);
      this.dialogTableVisible = true;
    },
    tjs(a, b) {
      // 打开界面
      this.dialogTableVisibles = true;
      // 点击获取的数据传输
      this.xg = a;
      // 循环遍历需要的条件找到父类型
      for (let index in this.newMenus) {
        if (this.newMenus[index].id == b) {
          this.xgfl = this.newMenus[index].type;
          break;
        }
      }
      this.xgs.prio = this.xg.prio;
      this.xgs.type = this.xg.type;
    },
    postData2() {
      this.xg.prio = this.xgs.prio;
      this.xg.type = this.xgs.type;
      this.dialogTableVisibles = false;
    },
  },
};
</script>

<style></style>
